<template>
  <div class="canvas-font">
    <quill-editor
      key="edit"
      :content="params.content"
      :options="editorOption"
      :style="editorStyle"
      @ready="onEditorReady($event)"
      @change="onEditorChange($event)"
      @dblclick.native="onDblClick"
      @focus="onEditorFocus($event)"
      @blur="onEditorBlur($event)"
    />
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import Quill from 'quill' // 编辑器模块化
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { mapState } from 'vuex'
import { STORE_NAMESPACE } from '../../../../config/constants'
export default {
  name: 'DesignCanvasFont',
  components: {
    quillEditor
  },
  props: {
    // 内容对象
    params: {
      type: Object,
      default: () => ({})
    },
    // 
    index: {
      type: Number,
      default: 0
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      quill: null, // 编辑器实例
      isEdit: false // 是否开启编辑
    }
  },
  computed: {
    ...mapState({
      current: state => state[STORE_NAMESPACE].current
    }),
    // 配置编辑器
    editorOption () {
      return {
        debug: false,
        placeholder: '',
        modules: {
          toolbar: false // 关闭工具栏
        }
      }
    },
    // 编辑器样式
    editorStyle () {
      return {
        'font-family': `${this.params.style['font-family']}, Roboto, sans-serif`,
        'line-height': this.params.style['line-height'],
        'letter-spacing': `${this.params.style['letter-spacing']}px`,
        'opacity': this.params.opacity,
        'min-width': '1em'
      }
    }
  },
  watch: {
    'current.id' () {
      // 当前选中模块是否为当前编辑器
      this.isEdit = this.current && (this.current.id === this.params.id)
      if (this.isEdit) {
        // 设置当前激活文本编辑器
        this.setCurrentEditor()
      } else {
        // 启用父组件拖动行为
        this.setDraggable(true)
        this.quill.enable(false) // 禁用编辑器, 如果是多个文本, 由于组件单独维护，根据current.id状态变更，当前current.id会被启用，其它的会被禁用
      }
    }
  },
  created () {
    this.registerPlugin()
  },
  methods: {
    // 编辑器注册插件
    registerPlugin () {
      const fontSizeStyle = Quill.import('attributors/style/size')
      const whitelist = () => { // 生成字体大小列表
        const size = []
        for(let i = 12; i < 800; i++) {
          size.push(`${i}px`)
        }
        return size
      }
      fontSizeStyle.whitelist = whitelist()
      Quill.register(fontSizeStyle, true)
    },
    // 编辑器加载完成
    onEditorReady (quill) {
      console.log('编辑器加载完成: ', quill)
      this.quill = quill
      this.quill.enable(false)
      this.$nextTick(() => {
        this.getEditorInfo()
      })
    },
    // 双击启用编辑器
    onDblClick () {
      if (this.disabled) return false
      // 启用编辑
      this.quill.enable(true)
      // 全选内容
      this.quill.setSelection(0, this.quill.getLength()) // getLength获取编辑器内容长度
      // 禁用父组件拖动行为
      this.setDraggable(false)
    },
    // 编辑器获取焦点
    onEditorFocus () {},
    // 编辑器失去焦点
    onEditorBlur () {},
    // 编辑器有变化
    onEditorChange (quill) {
      this.setCurrent({
        ...this.params,
        content: quill.html
      })
      this.$nextTick(() => { // 这里等待其它状态管理走完之后，重新获取编辑器内容
        this.getEditorInfo()
      })
    },
    // 更新编辑器信息
    getEditorInfo () {
      if (this.disabled) return false // 禁用
      const { clientWidth, clientHeight } = this.quill.root // 这里拿到现在编辑器内容的宽高，用于设置元素宽高
      const current = {
        ...this.params,
        width: clientWidth + 1,
        height: clientHeight + 1
      }
      this.setCurrent(current)
    },
    // 设置当前选中模块
    setCurrent (current) {
      this.$store.dispatch(`${STORE_NAMESPACE}/setCurrent`, current)
      this.$store.dispatch(`${STORE_NAMESPACE}/setElement`, {
        index: this.index,
        value: current
      })
    },
    // 激活当前编辑器
    setCurrentEditor () {
      this.$store.dispatch(`${STORE_NAMESPACE}/setCurrentEditor`, this.quill)
    },
    // 设置父组件拖动行为
    setDraggable (status) {
      if (status !== this.params.draggable) { // 判断预设值是否已经被设置
        if (status) {
          this.quill.setSelection(0, 0)
        }
        this.setCurrent({
          ...this.params,
          draggable: status
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.canvas-font {
  ::v-deep .ql-container {
    border: 0;
    font-size: inherit;
    font-family: inherit;
  }
  & ::v-deep .ql-editor {
    line-height: inherit;
    s {
      text-decoration: line-through;
    }
    u {
      text-decoration: underline;
    }
    em {
      font-style: italic;
    }
    strong {
      font-weight: bold;
    }
  }
}
</style>